import { RectNode, RectNodeModel, h } from "@logicflow/core";
import { setDisabledStyle } from "../method";

class UserTaskView extends RectNode {
	getLabelShape() {
		const { model } = this.props;
		const { x, y, width, height } = model;
		const style = model.getNodeStyle();
		return h(
			"svg",
			{
				x: x - width / 2 + 15,
				y: y - height / 2 + 15,
				width: 25,
				height: 25,
				viewBox: "0 0 1274 1024",
			},
			[
				h("path", {
					fill: style.stroke,
					d: "M512 328c-100.8 0-184 83.2-184 184S411.2 696 512 696 696 612.8 696 512 612.8 328 512 328z m0 320c-75.2 0-136-60.8-136-136s60.8-136 136-136 136 60.8 136 136-60.8 136-136 136z M857.6 572.8c-20.8-12.8-33.6-35.2-33.6-60.8s12.8-46.4 33.6-60.8c14.4-9.6 20.8-27.2 16-44.8-8-27.2-19.2-52.8-32-76.8-8-14.4-25.6-24-43.2-19.2-24 4.8-48-1.6-65.6-19.2-17.6-17.6-24-41.6-19.2-65.6 3.2-16-4.8-33.6-19.2-43.2-24-14.4-51.2-24-76.8-32-16-4.8-35.2 1.6-44.8 16-12.8 20.8-35.2 33.6-60.8 33.6s-46.4-12.8-60.8-33.6c-9.6-14.4-27.2-20.8-44.8-16-27.2 8-52.8 19.2-76.8 32-14.4 8-24 25.6-19.2 43.2 4.8 24-1.6 49.6-19.2 65.6-17.6 17.6-41.6 24-65.6 19.2-16-3.2-33.6 4.8-43.2 19.2-14.4 24-24 51.2-32 76.8-4.8 16 1.6 35.2 16 44.8 20.8 12.8 33.6 35.2 33.6 60.8s-12.8 46.4-33.6 60.8c-14.4 9.6-20.8 27.2-16 44.8 8 27.2 19.2 52.8 32 76.8 8 14.4 25.6 22.4 43.2 19.2 24-4.8 49.6 1.6 65.6 19.2 17.6 17.6 24 41.6 19.2 65.6-3.2 16 4.8 33.6 19.2 43.2 24 14.4 51.2 24 76.8 32 16 4.8 35.2-1.6 44.8-16 12.8-20.8 35.2-33.6 60.8-33.6s46.4 12.8 60.8 33.6c8 11.2 20.8 17.6 33.6 17.6 3.2 0 8 0 11.2-1.6 27.2-8 52.8-19.2 76.8-32 14.4-8 24-25.6 19.2-43.2-4.8-24 1.6-49.6 19.2-65.6 17.6-17.6 41.6-24 65.6-19.2 16 3.2 33.6-4.8 43.2-19.2 14.4-24 24-51.2 32-76.8 4.8-17.6-1.6-35.2-16-44.8z m-56 92.8c-38.4-6.4-76.8 6.4-104 33.6-27.2 27.2-40 65.6-33.6 104-17.6 9.6-36.8 17.6-56 24-22.4-30.4-57.6-49.6-97.6-49.6-38.4 0-73.6 17.6-97.6 49.6-19.2-6.4-38.4-14.4-56-24 6.4-38.4-6.4-76.8-33.6-104-27.2-27.2-65.6-40-104-33.6-9.6-17.6-17.6-36.8-24-56 30.4-22.4 49.6-57.6 49.6-97.6 0-38.4-17.6-73.6-49.6-97.6 6.4-19.2 14.4-38.4 24-56 38.4 6.4 76.8-6.4 104-33.6 27.2-27.2 40-65.6 33.6-104 17.6-9.6 36.8-17.6 56-24 22.4 30.4 57.6 49.6 97.6 49.6 38.4 0 73.6-17.6 97.6-49.6 19.2 6.4 38.4 14.4 56 24-6.4 38.4 6.4 76.8 33.6 104 27.2 27.2 65.6 40 104 33.6 9.6 17.6 17.6 36.8 24 56-30.4 22.4-49.6 57.6-49.6 97.6 0 38.4 17.6 73.6 49.6 97.6-6.4 19.2-14.4 38.4-24 56z",
				}),
				h("path", {
					fill: style.stroke,
					d: "M512.31992 1.535616c-282.766642 0-512.021328 228.89211-512.021328 511.210864 0 282.46805 229.254686 511.25352 512.021328 511.25352 117.431975 0 228.828126-39.606098 318.810964-111.204199 10.791969-8.488545 12.540865-24.22861 3.988336-34.99925-8.616513-10.770641-24.356578-12.540865-35.127218-3.94568-81.174373 64.538532-181.586603 100.241606-287.650754 100.241606-255.210864 0-462.028493-206.561693-462.028493-461.367325 0-254.762976 206.817629-461.303341 462.028493-461.303341 255.210864 0 462.092477 206.561693 462.092477 461.303341 0 87.380821-24.33525 171.093227-69.614596 243.651087-7.272848 11.645089-3.668416 27.086562 8.040657 34.35941 11.709073 7.272848 27.10789 3.62576 34.402066-7.976672 50.184787-80.406565 77.143381-173.247355 77.143381-270.055153C1024.383904 230.427726 795.10789 1.535616 512.31992 1.535616z",
				}),
			]
		);
	}
	// 渲染形状 (主题)
	getShape() {
		const { model } = this.props;
		const { x, y, width, height, radius } = model;
		const style = model.getNodeStyle();

		return h("g", {}, [
			h("rect", {
				...style,
				x: x - width / 2,
				y: y - height / 2,
				rx: radius,
				ry: radius,
				width,
				height,
			}),
			this.getLabelShape(),
		]);
	}
}

class UserTaskModel extends RectNodeModel {
	// 定义节点样式
	setAttributes() {
		this.width = 200;
		this.height = 130;
		this.radius = 30;
	}
	// 定义文本属性
	getTextStyle() {
		const style = super.getTextStyle();
		const properties = this.properties;
		style.fontSize = 18;
		style.stroke = setDisabledStyle(properties.disabled);
		return style;
	}
	// 定义节点属性
	getNodeStyle() {
		const style = super.getNodeStyle();
		const properties = this.properties;
		style.stroke = setDisabledStyle(properties.disabled);
		return style;
	}
	// 整体结构样式
	getAnchorStyle(anchorInfo: any) {
		const style = super.getAnchorStyle(anchorInfo);
		style.stroke = "aqua"; // 默认边框色
		style.r = 6;
		style.hover.r = 8;
		style.hover.fill = "aqua"; // hover 时背景填充色
		style.hover.stroke = "aqua"; // hover 时边框色
		return style;
	}
	// 连接时线的样式
	getAnchorLineStyle(anchorInfo: any) {
		const style = super.getAnchorLineStyle(anchorInfo);
		style.strokeWidth = 3;
		style.stroke = "aqua";
		return style;
	}
	// 鼠标移入时 outline 样式
	getOutlineStyle() {
		const style = super.getOutlineStyle();
		// style.stroke = "red";
		// style.hover!.stroke = "red";
		// style.strokeWidth = 1;
		return style;
	}
}

export const rectTask = {
	type: "RectTask",
	view: UserTaskView,
	model: UserTaskModel,
};
